<template>
  <a-drawer
    title="资源"
    :closable="false"
    :width="950"
    :visible="visiblePri"
    @close="onClose"
  >
    <a-table
      :loading="loading"
      :scroll="{ x: 1000 }"
      :columns="columns"
      :data-source="resourceList"
      :rowKey="(record) => record.id"
    >
      <template
        v-for="col in ['alias']"
        :slot="col"
        slot-scope="text, record"
      >
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            :maxLength="10"
            @change="e => handleChange(e.target.value, record.id, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record)" style="margin-right: 20px;">保存</a>
            <a @click="() => cancel(record.id)">取消</a>
          </span>
          <span v-else>
            <a :disabled="selectDrawPreview"  @click="() => edit(record.id)">修改别名</a>
          </span>
        </div>
      </template>
    </a-table>
  </a-drawer>
</template>
<script>
import { getGroupDept, updateResourceName } from "@/services/group";
export default {
  name: "selected-draw",
  props: ['visible', 'departmentId', 'resourceGroupCode', 'selectDrawPreview'],
  data() {
    return {
      resourceList: [],
      loading: false,
      cacheData: [],
      editingKey: '',
      columns: [
        {
          title: '资源名称',
          dataIndex: 'resourceName',
          scopedSlots: { customRender: 'resource-name' },
          key: 'resourceName'
        },
        {
          title: '资源路由',
          dataIndex: 'router',
          scopedSlots: { customRender: 'router' },
          key: 'router'
        },
        {
          title: '资源别名',
          dataIndex: 'alias',
          scopedSlots: { customRender: 'alias' },
          key: 'alias'
        },
        {
          title: '操作',
          key: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    };
  },
  computed: {
    visiblePri: {
      get() {
        return this.visible;
      },
      set() {}
    },
    departmentIdPri: {
      get() {
        return this.departmentId;
      },
      set() {}
    },
    resourceGroupCodePri: {
      get() {
        return this.resourceGroupCode;
      },
      set() {}
    }
  },
  watch: {
    visible(val) {
      val && this.init()
    }
  },
  methods: {
    async init() {
      this.loading = true;
      const { data } = await getGroupDept({
        departmentId: this.departmentIdPri,
        resourceGroupCode: this.resourceGroupCodePri
      });
      if (data.code === 200) {
        this.loading = false;
        this.resourceList = data.data;
        this.resourceList = this.resourceList.map(item => Object.assign(item, {editable: false}))
        this.cacheData = this.resourceList.map(item => ({ ...item }))
      }
    },
    handleChange(value, key, column) {
      const newData = [...this.resourceList];
      const target = newData.find(item => key === item.id);
      if (target) {
        target[column] = value;
        this.resourceList = newData;
      }
    },
    edit(key) {
      const newData = JSON.parse(JSON.stringify(this.resourceList));
      const target = newData.find(item => key === item.id);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.resourceList = newData;
      }
    },
    async save(row) {
      if (row.alias.length < 2) return this.$message.warning('别名长度要求在2~10个字符!');
      const newData = [...this.resourceList];
      const key = row.id;
      const alias = row.alias = row.alias.trim()
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.id);
      const targetCache = newCacheData.find(item => key === item.id);
      if (target && targetCache) {
        delete target.editable;
        this.resourceList = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
      const { data } = await updateResourceName({
        id: key,
        alias
      });
      const { code, message } = data;
      if (code !== 200) return this.$message.warning(message);
      this.$message.success('当前别名已修改，用户再次登录后生效 !');
    },
    cancel(key) {
      const newData = [...this.resourceList];
      const target = newData.find(item => key === item.id);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.id));
        delete target.editable;
        this.resourceList = newData;
      }
    },
    onClose() {
      this.$emit('closeDraw')
    },
    onSave() {}
  }
};
</script>
<style lang="less">
.mt30 {
  position: absolute;
  bottom: 20px;
  right: 50px;
}
</style>
